<template>
  <div>
    <!-- 轮播图 -->
    <div class="w">
      <el-carousel trigger="click" height="460px">
        <el-carousel-item v-for="item in img1" :key="item">
          <img :src="item" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <section>
      <!-- 手机 -->
      <div class="w">
        <span>手机</span>
        <div class="cen">
          <div class="left">
            <img
              src="http://101.132.181.9:3000/public/imgs/phone/phone.png"
              alt=""
            />
          </div>
          <div class="right">
            <ul>
              <li
                v-for="item in dist"
                :key="item.id"
                @click="
                  $router.push(`/goods/details?productID=${item.product_id}`)
                "
              >
                <img
                  :src="`http://101.132.181.9/api/${item.product_picture}`"
                  alt=""
                />
                <h2>
                  {{ item.product_name }}
                </h2>
                <h3>
                  {{ item.product_title }}
                </h3>
                <p>
                  <span>{{ item.product_selling_price }}元</span>
                  <span class="del">{{ item.product_price }}元</span>
                </p>
              </li>
              <li>
                <a href="">浏览更多》</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 家电 -->
      <div class="ha w">
        <div class="jd">
          <span>家电</span>
          <div class="r">
            <span class="a1" @mouseover="hot">热门</span>
            <span class="a1" @mouseover="tv">电视影音</span>
          </div>
        </div>
        <div class="center">
          <div class="left">
            <img
              class="img2"
              src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo1.png"
              alt=""
            />
            <img
              class="img3"
              src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo2.png"
              alt=""
            />
          </div>
          <div class="right">
            <!-- 热门 -->
            <ul v-show="Hotflag">
              <li
                v-for="item in rm"
                :key="item.id"
                @click="
                  $router.push(`/goods/details?productID=${item.product_id}`)
                "
              >
                <img
                  :src="`http://101.132.181.9/api/${item.product_picture}`"
                  alt=""
                />
                <h2>{{ item.product_name }}</h2>
                <h3>{{ item.product_title }}</h3>
                <p>
                  <span>{{ item.product_selling_price }}元</span>
                  <span class="del">{{ item.product_price }}元</span>
                </p>
              </li>
              <li>
                <a href="">浏览更多》</a>
              </li>
            </ul>
            <!-- 电视影音 -->
            <ul v-show="tvflag">
              <li
                v-for="item in HA"
                :key="item.id"
                @click="
                  $router.push(`/goods/details?productID=${item.product_id}`)
                "
              >
                <img
                  :src="`http://101.132.181.9/api/${item.product_picture}`"
                  alt=""
                />
                <h2>{{ item.product_name }}</h2>
                <h3>{{ item.product_title }}</h3>
                <p>
                  <span>{{ item.product_selling_price }}元</span>
                  <span class="del">{{ item.product_price }}元</span>
                </p>
              </li>
              <li>
                <a href="">浏览更多》</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 配件 -->
      <div class="sp w">
        <div class="pj">
          <span>配件</span>
          <div class="r">
            <span class="a1" @mouseover="hot2">热门</span>
            <span class="a1" @mouseover="tao2">保护套</span>
            <span class="a1" @mouseover="chq2">充电器</span>
          </div>
        </div>
        <div class="centers">
          <div class="left">
            <img
              class="img2"
              src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo1.png"
              alt=""
            />
            <img
              class="img3"
              src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo2.png"
              alt=""
            />
          </div>
          <div class="right">
            <!-- 热门 -->
            <ul v-show="hot2_flag">
              <li
                v-for="item in hotp"
                :key="item.id"
                @click="
                  $router.push(`/goods/details?productID=${item.product_id}`)
                "
              >
                <img
                  :src="`http://101.132.181.9/api/${item.product_picture}`"
                  alt=""
                />
                <h2>{{ item.product_name }}</h2>
                <h3>{{ item.product_title }}</h3>
                <p>
                  <span>{{ item.product_selling_price }}元</span>
                  <span class="del">{{ item.product_price }}元</span>
                </p>
              </li>
              <li>
                <a href="">浏览更多》</a>
              </li>
            </ul>
            <!-- 保护套 -->
            <ul v-show="tao2_flag">
              <li
                v-for="item in bht"
                :key="item.id"
                @click="
                  $router.push(`/goods/details?productID=${item.product_id}`)
                "
              >
                <img
                  :src="`http://101.132.181.9/api/${item.product_picture}`"
                  alt=""
                />
                <h2>{{ item.product_name }}</h2>
                <h3>{{ item.product_title }}</h3>
                <p>
                  <span>{{ item.product_selling_price }}元</span>
                  <span class="del">{{ item.product_price }}元</span>
                </p>
              </li>
              <li>
                <a href="">浏览更多》</a>
              </li>
            </ul>
            <!-- 充电器 -->
            <ul v-show="chq2_flag">
              <li
                v-for="item in cdq"
                :key="item.id"
                @click="
                  $router.push(`/goods/details?productID=${item.product_id}`)
                "
              >
                <img
                  :src="`http://101.132.181.9/api/${item.product_picture}`"
                  alt=""
                />
                <h2>{{ item.product_name }}</h2>
                <h3>{{ item.product_title }}</h3>
                <p>
                  <span>{{ item.product_selling_price }}元</span>
                  <span class="del">{{ item.product_price }}元</span>
                </p>
              </li>
              <li>
                <a href="">浏览更多》</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { getPhone, getHot } from "@/api/user";
export default {
  data() {
    return {
      Hotflag: true,
      tvflag: false,
      hot2_flag: true,
      tao2_flag: false,
      chq2_flag: false,
      activeIndex: "1",
      img1: [
        "http://101.132.181.9:3000/public/imgs/cms_1.jpg",
        "http://101.132.181.9:3000/public/imgs/cms_2.jpg",
        "http://101.132.181.9:3000/public/imgs/cms_3.jpg",
        "http://101.132.181.9:3000/public/imgs/cms_4.jpg",
      ],
      dist: [],
      // 电视影音
      HA: [],
      // 热门
      rm: [],
      // 保护套
      bht: [],
      // 热门配件
      hotp: [],
      // 充电器
      cdq: [],
    };
  },
  mounted() {
    this.getPhoneList();
    this.getHotp();
    this.getHotMen();
    this.getBht();
    this.getHotPei();
    this.getCdq();
  },
  methods: {
    //家电 鼠标划过热门
    hot() {
      this.Hotflag = true;
      this.tvflag = false;
    },
    //划过电视影音
    tv() {
      this.Hotflag = false;
      this.tvflag = true;
    },
    //划过热门
    hot2() {
      this.hot2_flag = true;
      this.tao2_flag = false;
      this.chq2_flag = false;
    },
    //划过保护套
    tao2() {
      this.hot2_flag = false;
      this.tao2_flag = true;
      this.chq2_flag = false;
    },
    //划过充电器
    chq2() {
      this.hot2_flag = false;
      this.tao2_flag = false;
      this.chq2_flag = true;
    },
    //获取热门配件
    async getHotPei() {
      const res = await getHot({
        categoryName: ["保护套", "保护膜", "充电器", "充电宝"],
      });
      // console.log(res, 2222);
      this.hotp = res.data.Product;
    },
    //获取充电器
    async getCdq() {
      const res = await getPhone({ categoryName: "充电器" });
      // console.log(res.data);
      this.cdq = res.data.Product;
    },
    //获取保护套
    async getBht() {
      const res = await getPhone({ categoryName: "保护套" });
      // console.log(res.data);
      this.bht = res.data.Product;
    },
    //获取热门家电
    async getHotMen() {
      let res = await getHot({ categoryName: ["电视机", "空调", "洗衣机"] });
      // console.log(res.data, 333);
      this.rm = res.data.Product;
      // console.log(this.rm);
    },
    //获取电视影音
    async getHotp() {
      let res = await getPhone({ categoryName: "电视机" });
      //   console.log(res.data);
      this.HA = res.data.Product;
    },
    // 获取手机
    async getPhoneList() {
      const res = await getPhone({ categoryName: "手机" });
      //   console.log(res.data);
      this.dist = res.data.Product;
    },
  },
};
</script>

<style scoped lang="scss">
.el-carousel {
  margin-top: 20px;
}
.img {
  width: 100%;
  height: 100%;
}
section {
  width: 100%;
  background: #f5f5f5;
  margin-top: 20px;
  .w,
  .ha,
  .sp {
    span {
      font-size: 22px;
      font-weight: 200;
      line-height: 45px;
    }
    .jd,
    .pj {
      display: flex;
      justify-content: space-between;
      .r .a1 {
        padding-right: 10px;
        text-align: center;
        font-size: 15px;
        &:hover {
          padding-right: 10px;
          text-align: center;
          font-size: 15px;
          color: red;
          font-weight: bold;
        }
      }
    }
    .cen,
    .center,
    .centers {
      display: flex;
      .left {
        width: 234px;
        height: 613px;
        img {
          width: 234px;
          height: 613px;
        }
        .img2 {
          width: 234px;
          height: 300px;
        }
        .img3 {
          width: 234px;
          height: 300px;
          margin-top: 20px;
        }
      }
      .right {
        flex: 1;
        height: 613px;
        ul {
          float: right;
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          justify-content: space-around;
          li {
            background: #fff;
            width: 234px;
            height: 300px;
            margin-top: 10px;
            transition: all 0.2s linear;
            img {
              width: 160px;
              height: 160px;
              margin: 0 0 0 25px;
            }
            a {
              display: block;
              text-align: center;
              line-height: 258px;
            }
            h2 {
              margin: 25px 10px 0;
              font-size: 14px;
              color: #333;
            }
            h3 {
              margin: 5px 10px;
              height: 18px;
              font-size: 12px;
              color: #b0b0b0;
            }
            p {
              margin: 10px 10px 10px;
              text-align: center;
              color: #ff6700;
            }
            .del {
              margin-left: 0.5em;
              color: #b0b0b0;
              text-decoration: line-through;
            }
            h2,
            h3 {
              font-weight: 400;
              text-align: center;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
          li:hover {
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
          }
        }
      }
    }
  }
}
</style>
